<template>
	<view class="login">
		<view class="logo">
			<img src="../../static/hc.png" alt="">
		</view>
		<view class="title">
			<view class="h1">号卡管理系统</view>
		</view>
		<!-- 直接账号密码登录 -->
		<view class="form_box" v-if="showLog === 'login'">
			<u--form borderBottom labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item borderBottom label="用户名" prop="userInfo.username" borderBottom labelWidth="60px">
					<u--input v-model="userInfo.username" border="none" placeholder="请输入用户名"></u--input>
				</u-form-item>
				<u-form-item borderBottom label="密码" prop="userInfo.password" borderBottom labelWidth="50px">
					<u--input type='password' v-model="userInfo.password" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>
				<u-button class="login" @click="login" type="primary">登录</u-button>
			</u--form>
			<view class="bottom">
				<span @click="switchForm('register')" type="primary">注册</span>
				<span @click="switchForm('smsLogin')" type="primary">短信登录</span>
			</view>
		</view>
		<!-- 注册新的账号 -->
		<view class="form_box" v-else-if="showLog === 'register'">
			<u--form borderBottom labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item borderBottom label="用户名" prop="userInfo.username1" borderBottom labelWidth="60px">
					<u--input v-model="userInfo.username1" border="none" placeholder="请输入用户名"></u--input>
				</u-form-item>
				<u-form-item borderBottom label="密码" prop="userInfo.password1" borderBottom labelWidth="50px">
					<u--input type='password' v-model="userInfo.password1" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>
				<u-form-item borderBottom label="手机号" prop="userInfo.phone1" borderBottom labelWidth="60px">
					<u--input v-model="userInfo.phone1" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item class="codeform" label="验证码" prop="userInfo.code1" labelWidth="50px">
					<view class="code-input-container">
						<view class="inputbox">
							<u-input v-model="userInfo.code1" border="none" placeholder="请输入验证码"></u-input>
						</view>
						<view class="inputbtn">
							<span @click="sendCode" :disabled="countdown > 0">发送验证码</span>
						</view>
					</view>
				</u-form-item>
				<u-button class="login" @click="Registerlogin" type="primary">登录</u-button>
			</u--form>
			<view class="bottom">
				<span @click="switchForm('login')" type="primary">返回登录</span>
			</view>
		</view>
		<!-- 短信验证码登录 -->
		<view class="form_box" v-else-if="showLog === 'smsLogin'">
			<u--form borderBottom labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item borderBottom label="手机号" prop="userInfo.phone" borderBottom labelWidth="60px">
					<u--input v-model="userInfo.phone" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>

				<u-form-item class="codeform" label="验证码" prop="userInfo.code" labelWidth="50px">
					<view class="code-input-container">
						<view class="inputbox">
							<u-input v-model="userInfo.code" border="none" placeholder="请输入验证码"></u-input>
						</view>
						<view class="inputbtn">
							<span @click="SMSsendCode" :disabled="countdown > 0">发送验证码</span>
						</view>
					</view>
				</u-form-item>
				<u-button class="login" @click="smslogin" type="primary">登录</u-button>
			</u--form>
			<view class="bottom">
				<span @click="switchForm('login')" type="primary">返回登录</span>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import {
		uToast
	} from 'uview-ui';
	import request from "../../until/request.js"
	export default {
		data() {
			return {
				userInfo: {
					username: '',
					password: '',
					// 这里1表示注册时候用的
					username1: '',
					password1: "",
					phone1: "",
					code1: "",
					// 这里没有1是短信登录
					phone: "",
					code: "",
				},
				// 切换展示的是登录还是注册
				showLog: 'login',
				rules: {
					username: [
						// 必填规则
						{
							required: true,
							message: '请输入用户名',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
					],
					password: [{
						required: true,
						message: '请输入密码',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}, ]
				},
				// 发送验证码的倒计时
				countdown: 0,
			}
		},

		methods: {
			// 切换展示的表单
			switchForm(formType) {
				this.showLog = formType; // 更新showLog属性来切换表单
			},
			// 按钮登录
			login() {
				uni.request({
					url: 'http://101.126.42.213:9090/user/login',
					method: 'POST',
					data: {
						username: this.userInfo.username,
						password: this.userInfo.password,
					},
					header: {
						'content-type': 'application/json' // Specify the content type if sending JSON data
					},
					success: (res) => {
						// console.log('Request success', res);
						
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'success',
								duration: 2000,
								success: () => {
									uni.switchTab({
										url: '/pages/home/home'
									});
								}
							});
							uni.setStorage({
								key: "user",
								data: res.data.data,
								success: () => {
									console.log('存储成功')
								}
							})
							uni.setStorage({
								key:'token',
								data:res.data.data.token,
								success: () => {
									console.log('token存储成功')
								}
							})
							
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'error',
								duration:2000
							})
						}

					},
					fail: (err) => {
						console.error('Request failed', err);

					}
				});
			},
			// 登录结束
			// 发送验证码的倒计时
			startCountdown() {
				if (this.countdown === 0) {
					this.countdown = 60;
					this.countdownTimer();
					// 在这里触发发送验证码的逻辑，例如调用 sendCode 函数
					this.sendCode();
				}
			},
			countdownTimer() {
				if (this.countdown > 0) {
					setTimeout(() => {
						this.countdown -= 1;
						this.countdownTimer();
					}, 1000);
				}
			},
			// 倒计时结束

			// 注册发送短信验证码
			sendCode() {
				let formData = new FormData();
				formData.append("phone", this.userInfo.phone);
				uni.request({
					url: 'http://101.126.42.213:9090/user/message/send',
					method: 'POST',
					data: formData,
					header: {
						"Content-Type": "multipart/form-data" // Specify the content type if sending JSON data
					},
					success: (res) => {
						uni.showToast({
							title: '发送成功',
							icon: 'success',
							duration: 2000,
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '发送失败',
							icon: 'error',
							duration: 2000,
						})
					}
				})
			},
			// 注册登录按钮
			Registerlogin() {
				let formData = new FormData();
				//此处需要和后端接收的参数名相同
				formData.append("username", this.userInfo.username1);
				formData.append("password", this.userInfo.password1);
				formData.append("phone", this.userInfo.phone1);
				formData.append("code", this.userInfo.code1);
				uni.request({
					url: 'http://101.126.42.213:9090/user/register',
					method: 'POST',
					data: formData,
					success: (res) => {
						console.log(res, '注册成功')
						uni.setStorage({
							key: "token",
							data: res.data.data.token,
							success: () => {
								console.log('存储成功')
							}
						})
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 2000,
							success: () => {
								uni.switchTab({
									url: '/pages/home/home'
								});
							}
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '登录失败',
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			// 短信登录 发送验证码
			SMSsendCode() {
				let formData = new FormData();
				formData.append("phone", this.userInfo.phone);
				uni.request({
					url: 'http://101.126.42.213:9090/user/message/send',
					method: "POST",
					data: formData,
					success: (res) => {
						uni.showToast({
							title: '发送成功',
							icon: 'success',
							duration: 2000
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '发送失败',
							icon: "error",
							duration: 2000
						})
					}
				})
			},
			// 短信 确认登录按钮
			smslogin() {
				let formData = new FormData()

				formData.append('phone', this.userInfo.phone),
					formData.append('code', this.userInfo.code),
					uni.request({
						url: "http://101.126.42.213:9090/user/message/check",
						method: 'POST',
						data: formData,
						success: (res) => {
							uni.setStorage({
								key: "token",
								data: res.data.data.token,
								success: () => {
									console.log('存储成功')
								}
							})
							uni.showToast({
								title: '登录成功',
								icon: 'success',
								duration: 2000,
								success: () => {
									uni.switchTab({
										url: '/pages/home/home'
									});
								}
							})
						}
					})
			}
			// 登录结束
		},

	}
</script>

<style src='./login.css' scoped>

</style>